<template>
	<view class="container" v-if="loaded">
		<view class="logo">
			<image src="../../static/logo.png"></image>
			<text>zxc</text>
		</view>
		
		<view class="row">
			<button class="btn btn-cancel" @click="handleRedirect()">暂不登录</button>
			
			<button v-if="isRead" class="btn btn-submit" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">快捷登录</button>
			
			<button v-if="!isRead" class="btn btn-submit" style="opacity: .5">快捷登录</button>
			
			<view class="tips">
				<view class="icon" @click="onReadClick">
					<image v-if="isRead" src="../../static/fanli/icon_checked.png" mode="" class="img"></image>
					
					<view v-if="!isRead" class="line"></view>
				</view>
				
				<view class="con">
					<view class="p">
						阅读并同意以下<text>《用户协议》</text>
					</view>
					<view class="p">
						同意获取您的用户信息（昵称，头像，手机号码）
					</view>
				</view>
			</view>
		</view>
		
		<view class="popup" v-if="popup_visibile">
			<view class="con">
				<view class="avatar">
					
				</view>
				
				<view class="pp">
					<view class="p">
						为了更好的提供服务
					</view>
					<view class="p">
						同意授权获取您的用户信息（昵称，头像）
					</view>
				</view>
				
				<view class="buttons">
					<button class="btn btn-cancel" @click="handleClosePopup">取消</button>
					<button class="btn btn-submit" open-type="getUserInfo" @getuserinfo="onGetUserInfo">授权</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		JSMRequest
	} from '@/module/api'
	import { formatDateTime } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import { getToken, saveToken, saveOpenid, getOpenid, urlParams } from '@/common/util'
	
	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		data() {
			return {
				loaded: false,
				isRead: false,
				popup_visibile: false,
				path: '/pages/main/home/home'
				// path: '/pageMe/me/bind-invite/bind-invite'
			}
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			},
			
			invite () {
				return this.$store.state.invite
			}
		},
		
		onLoad(option) {
			// option.scene="iv%3Dasdfgh%26p%3Djgd%26id%3D11194346647"
			
			if(option.scene){
				let params = urlParams(decodeURIComponent(option.scene))
				
				if(params.iv){
					this.$store.dispatch('updateInvite', params.iv)
				}
				
				if(params.p){
					switch (params.p) {
						case "jgd" :
							if(params.id){
								this.path = "/pages/home/good-detail/good-detail?redirect=true&id=" + params.id
							}
							break;
						case "sgd" :
							if(params.id){
								this.path = "/pageSupplier/supplier/good-detail/good-detail?redirect=true&id=" + params.id
							}
							break;
					}
				}
			}
			
			let token = getToken()
			
			if(token){
				this.handleLogin({})
			}else{
				this.loaded = true
			}
		},
		
		methods: {
			handleRedirect () {
				if(this.path == '/pages/main/home/home'){
					uni.switchTab({
						url: this.path
					})
				}else{
					uni.redirectTo({
						url: this.path
					})
				}
			},
			
			handleClosePopup () {
				this.popup_visibile = false
			},
			
			handleGetUserInfo () {
				let _t = this
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				JSMRequest({
					tag: "jsm-userInfo"
				}).then(({data}) => {
					uni.hideLoading()
					saveToken({
						data: new Date().getTime()
					})
					_t.$store.dispatch('updateUserInfo', data)
					_t.handleRedirect()
				}).catch(e => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: e.msg
					})
					_t.loaded = true
				})
				
			},
			
			handleLogin ({ nickName, avatarUrl }) {
				let _t = this
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				uni.login({
					success: ({ code }) => {
						let params = {
							js_code: code,
							invite: this.invite
						}
						if(avatarUrl) params.head = avatarUrl
						if(nickName) params.nickname = nickName
						JSMRequest({
							tag: "jsm-login",
							method: "POST",
							params
						}).then(({data}) => {
							uni.hideLoading()
							_t.handleGetUserInfo()
						}).catch(e => {
							uni.hideLoading()
							uni.showToast({
								icon: "none",
								title: e.msg
							})
							_t.loaded = true
						})
					}
				})
				
				
			},
			
			onGetUserInfo (e) {
				// let { nickName, avatarUrl } = e.detail.userInfo
				this.handleLogin(e.detail.userInfo)
			},
			
			onGetphonenumber (e) {
				let _t = this;
				if (e.detail.errMsg=='getPhoneNumber:ok'){
					let params = {
						invite: this.invite
					};
					params.iv = (e.detail.iv);
					params.encryptedData = (e.detail.encryptedData);

					uni.login({
						success: function (res) {
							params.js_code = res.code;
							// console.log(params);
							JSMRequest({
								tag: "jsm-auth",
								method: "POST",
								params: params
							}).then(() => {
								uni.hideLoading()
								
								// _t.handleLogin();
								_t.popup_visibile = true
							}).catch(e => {
								uni.hideLoading()
								uni.showToast({
									icon: "none",
									title: e.msg
								})
							})
						},
						fail: function (res) {
							uni.showToast({
								title: '授权登录失败',
								icon: 'none'
							})
						}
					})
				}
			},
			
			onReadClick () {
				this.isRead = !this.isRead
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		width: 100%;
		margin: 0 auto;
		background: #fff;
		padding-bottom: 40px;
		padding-top: 20px;
		border-radius: 0 0 12px 12px;
	}

	.row{
		position: fixed;
		bottom: 180px;
		left: 0;
		width: 100%;
		padding: 0 50px;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		
		.btn{
			width: calc(~"50% - 15px");
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50px;
			font-size: 32px;
			color: #fff;
		}
		
		.btn-submit{
			background: #FF264C;
		}
		
		.btn-cancel{
			background: #999999;
		}
	}

	.logo{
		margin: 140px auto;
		width: 240px;
		text-align: center;
		
		image{
			width: 240px;
			height: 240px;
		}
		
		text{
			color: #333333;
			font-size: 48px;
		}
	}


	.tips{
		width: 100%;
		display: flex;
		align-items: flex-start;
		margin-top: 60px;
		
		.icon{
			margin-right: 20px;
			
			.img{
				width: 32px;
				height: 32px;
			}
			
			.line{
				width: 32px;
				height: 32px;
				border: 2px solid #C0C0C0;
				border-radius: 32px;
				box-sizing: border-box;
			}
		}
		
		.con{
			
			.p{
				font-size: 24px;
				color: #aaaaaa;
				
				text{
					color: #FF264C;
				}
			}
		}
	}
	
	.popup{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		background: rgba(0,0,0,.75);
		
		.con{
			width: 520px;
			border-radius: 12px;
			background: #FFFFFF;
			padding: 30px 0;
			
			.avatar{
				width: 120px;
				height: 120px;
				border-radius: 60px;
				background: #999999;
				margin: 0 auto 60px;
			}
			
			.pp{
				padding: 0 30px;
				
				.p{
					font-size: 24px;
					color: #999999;
				}
			}
			
			.buttons{
				width: 100%;
				padding: 30px 30px 0;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				
				.btn{
					width: calc(~"50% - 15px");
					height: 80px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50px;
					font-size: 28px;
					color: #fff;
				}
				
				.btn-submit{
					background: #FF264C;
				}
				
				.btn-cancel{
					background: #999999;
				}
			}
		}
	}
</style>
